Vites는 무엇인가?

---

1. Vite 핵심 개념

■ 작동 환경

1. Vite 자체는 Node.js 런타임 환경 위에서 동작하는 도구입니다.
2. 개발용 서버로 작동할 경우 vite dev 명령어가 Node 프로세스에서 실행됩니다.
3. Rollup, esbuild 같은 트랜스파일러와 번들러도 Node 기반 라이브러리입니다.

■ Development Server (개발 서버)

개발 중에 **ESM(ES Module)**을 이용하여 코드를 실시간으로 브라우저에 전달합니다.

• 기존 Webpack은 코드 전체를 번들링 후 브라우저에 전달하므로 → 느림
• Vite는 요청이 들어온 모듈만 실시간 변화하여 브라우저에 전송하므로 → 빠름

■ Production Build (프로덕션 빌드)

프로덕션에서는 내부적으로 Rollup을 사용하여 코드를 최적화하여 번들링 합니다.

• 코드 분할 (Code Splitting)
• Tree-shaking
• 압축 (Minify)
• 캐싱 전략

---

2. Vite 동작 흐름

■ Development Server (vite dev)

• ESM 방식으로 실시간 변환하므로 Rollup 번들링 없이 브라우저에 전달됩니다.
• Vite 개발 서버 실행 → 요청 시 esbuild 기반으로 실시간 코드 변환 → ESM 방식으로 브라우저에 모듈 전송

■ Production Build (vite build)

• Rollup을 사용하여 코드를 최적화하여 번들링 합니다.
• vite.config.js 설정 읽기 → 내부적 Rollup API 호출 → build.rollupOptions 설정을 적용해 빌드 → Rollup 모듈 번들링 및 최적화 수행 → 결과물을 /dist에 출력

---

3. Vite 설치 및 기본 명령

개발 단계	사용 명령어	설명
프로젝트 생성	npm create vite@latest	프로젝트 세팅
의존성 설치	npm install	패키지 설치
개발 서버 실행	npm run dev	HMR 개발 서버 실행
프로덕션 빌드	npm run build	최적화 번들 생성<br>dist 폴더에 최적화된 빌드 파일이 생성된다.
빌드 결과 확인	npm run preview	빌드 파일 로컬 확인

---

4. 예시 : Vite 기본 사용

STEP 1 : 프로젝트 생성

• React + Vite 로 프로젝트 생성
• localhost:5173 같은 개발 서버가 실행되고, 개발 서버에서는 코드를 수정하면 실시간 반영됩니다.
• src/ 폴더 안의 파일을 수정하면 자동으로 반영됩니다 (HMR).

npm create vite@latest my-vite-project
cd my-vite-project
npm install
npm run dev

STEP 2-1 : src 폴더 안에서 파일 수정

• src/App.jsx
• 코드를 수정하면 브라우저를 새로고침 하지 않아도 실시간으로 반영됩니다.

function App() {
  return (
    <div>
      <h1>Hello PION79 Friends ~ </h1>
    </div>
  );
}
export default App;

STEP 2-2 : 새 파일을 만들어서 컴포넌트 구성

• src/components/MyButton.jsx

function MyButton() {
  return <button>Click Me</button>;
}
export default MyButton;

• src/App.jsx : App.jsx에서 MyButton.jsx의 MyButton을 가져다 사용할 수 있습니다. 저장하면 바로 브라우저에 적용됩니다.

import MyButton from "./components/MyButton";
function App() {
  return (
    <div>
      <h1>Hello PION79 Friends ~</h1>
      <MyButton />
    </div>
  );
}

STEP 2-3 : CSS 사용

• src/App.css

h1 {
  color: #ff4500;
}

• App.jsx에 import하면 바로 적용됩니다.

import "./App.css";

---

5. Vite 프로젝트 기본 구조 예시

■ Node 기반 React 프로젝트 예시

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   └── main.jsx
├── package.json
├── vite.config.js
└── index.html

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});